<template>
  <div v-if="labelStyle" class="attr-grid" style="grid-template-columns: repeat(2, 1fr);">
    <el-form-item label="文本内容" style="grid-column: 1 / 3;">
      <el-input v-model="_cell.attrs.label.text" type="textarea" @input="attrsHandle('label/text')" />
    </el-form-item>
    <el-form-item label="文本颜色">
      <el-color-picker
        v-model="labelStyle.color" show-alpha
        @change="attrsHandle('label/style/color')"
      />
    </el-form-item>
    <el-form-item label="文本字号">
      <el-input-number v-model="labelStyle.fontSize" :min="12" @change="attrsHandle('label/style/fontSize')" />
    </el-form-item>
    <el-form-item label="水平对齐">
      <el-radio-group v-model="labelStyle.textAlign" @change="textAlignHandle">
        <el-radio-button label="start">左</el-radio-button>
        <el-radio-button label="center">中</el-radio-button>
        <el-radio-button label="end">右</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="垂直对齐">
      <el-radio-group v-model="labelStyle.alignItems" @change="attrsHandle('label/style/alignItems')">
        <el-radio-button label="flex-start">上</el-radio-button>
        <el-radio-button label="center">中</el-radio-button>
        <el-radio-button label="flex-end">下</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="文本样式">
      <el-checkbox :model="labelStyle.fontWeight === 'bold'" label="加粗" @change="toggleFontWeight" />
      <el-checkbox :model="labelStyle.fontStyle === 'oblique'" label="倾斜" @change="toggleOblique" />
    </el-form-item>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, defineProps, onMounted, ref } from 'vue'
import { Cell } from '@antv/x6'
import { ObjectUtil } from '@utils/object-util'
import lodash from '@utils/lodash'

const props = defineProps<{
  cell: Cell
}>()

const _cell = ref(null)
const labelStyle = ref(null)
onMounted(function () {
  syncCell()
  props.cell.on('change:attrs', syncCell)
})

onBeforeUnmount(function () {
  props.cell.off('change:attrs', syncCell)
})

// region TODO 同步数据
const syncCell = lodash.debounce(function () {
  const cellTemp = ObjectUtil.copy(props.cell)
  cellTemp.attrs = ObjectUtil.copy(props.cell.attrs)
  _cell.value = cellTemp
  labelStyle.value = _cell.value.attrs.label.style
}, 200)
// endregion

// region TODO 设置属性
function attrsHandle (key: string, val?: string) {
  const value = val || ObjectUtil.getAttr(_cell.value.attrs, key, '/')
  // 设置一次空值,解决画布不及时更新问题
  // props.cell.attr(key, 'null', { silent: true })
  props.cell.attr(key, value)
}
// endregion

function textAlignHandle (value) {
  props.cell.attr('label/style/textAlign', value)
  switch (value) {
    case 'start':
      props.cell.attr('label/style/justifyContent', 'flex-start')
      break
    case 'center':
      props.cell.attr('label/style/justifyContent', 'center')
      break
    case 'end':
      props.cell.attr('label/style/justifyContent', 'flex-end')
      break
  }
}

function toggleFontWeight (value:boolean) {
  props.cell.attr('label/style/fontWeight', value ? 'bold' : 'unset')
}

function toggleOblique (value:boolean) {
  props.cell.attr('label/style/fontStyle', value ? 'oblique' : 'unset')
}
</script>

<style lang="scss" scoped>
</style>
